<script lang="ts" >

import { Folder, FileHandle } from "@@/FileControl/openDirectory";
import { defineComponent } from "vue";

interface IProps {
    folder: Folder;

}
export default defineComponent({
    name: "Tree",
    props: ["folder"],
    setup(props: IProps, { emit }) {
        const { folder } = props;
        const openFile = (item: FileHandle) => {
            emit('openFile', item)
        }
        return { folder, openFile }
    }
})
</script>
<template>
    <ul class="text-left cursor-default select-none">
        <li
            class="pl-4 hover:bg-gray-100"
            v-for="(item) in folder.files "
            :key="item.path"
            @click="openFile(item)"
        >{{ item.name }}</li>
        <details v-for="(dir) in folder.dirs " :key="dir.path">
            <summary
                @click.self="dir.update()"
                class="font-bold hover:bg-gray-100"
            >{{ dir.handle.name }}</summary>
            <Tree :folder="dir" class="pl-4" @openFile="openFile"></Tree>
        </details>
    </ul>
</template>
